<template>
  <div class="app-container">
    邮件列表
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="emailSearchForm.subject" placeholder="邮件主题"/>
      </el-form-item>
      <el-form-item>
        <el-select clearable v-model="emailSearchForm.userId" placeholder="发送人" >
          <el-option v-for="user in userList" :value="user.userId" :label="user.nickName" :key="user.userId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select clearable v-model="emailSearchForm.sendRslt" placeholder="发送结果">
          <el-option value="01" label="成功"/>
          <el-option value="02" label="失败"/>
          <el-option value="03" label="发送中"/>
        </el-select>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getEmailData()">查询</el-button>
      <el-button type="default" @click="resetData()">重置</el-button>
      <el-button type="primary" style="float: right;margin-right: 10%" @click="openDialog()">新建发送任务</el-button>
    </el-form>
    <el-table :data="emailData.records" style="width: 100%" v-loading="loading">
      <el-table-column prop="sender" label="发送人" width="180"></el-table-column>
      <el-table-column prop="subject" label="主题" width="180"></el-table-column>
      <el-table-column prop="receiverName" label="接收人"></el-table-column>
      <el-table-column prop="sendRslt" label="发送结果">
        <template slot-scope="scope">
          <span v-for="(value,key) in sendRslt" :value="key" :key="key"
                v-if="scope.row.sendRslt===key">{{ value }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="scope">
          <i type="primary" class="el-icon-refresh-left" style="color: #1482f0;margin-right: 5px"
             v-loading.fullscreen="fullscreenLoading" v-if="scope.row.sendRslt!='01'"
             @click="resendEmail(scope.row.eduEmailId)" title="重发"></i>
          <i type="primary" class="el-icon-view" style="color: #1482f0" @click="showInfo(scope.row)" title="查看详细"></i>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="emailSearchForm.currentPage"
      :page-size="emailSearchForm.pageSize"
      :total="emailData.total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getEmailData"
    />
    <el-dialog :close-on-click-modal="false"  title='邮件发送' :visible.sync="dialogFormShow" style="height: 700px">
      <el-form :model="emailForm" :rules="emailSendRules" ref="emailForm">
        <el-form-item label="主题" label-width="120px" prop="subject">
          <el-input v-model="emailForm.subject" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="接收人" label-width="120px" prop="to">
          <el-select clearable multiple v-model="emailForm.to" style="width: 300px;" filterable placeholder="请选择">
            <el-option
              v-for="item in teacherList"
              :key="item.id"
              :label="item.name"
              :value="item.email">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发送内容" label-width="120px" prop="cont">
          <quill-editor
            v-model="emailForm.cont"
            ref="myQuillEditor"
            :options="editorOption"
            @focus="onEditorFocus($event)"
            @blur="onEditorBlur($event)"
            @change="onEditorChange($event)"
            class="editor"
          ></quill-editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormShow = false">取 消</el-button>
        <el-button type="primary" @click="sendMsg" v-loading.fullscreen="fullscreenLoading">发 送</el-button>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false"  title='查看发送详细' :visible.sync="dialogInfoShow" style="height: 600px;">
      <div class="clo_class">
        <span>发送主题 : </span>
        <span class="generalClass">{{ emailSendRecCurrentSelect.subject }}</span>
      </div>
      <div class="clo_class">
        <span>发送时间 : </span>
        <span class="generalClass">{{ emailSendRecCurrentSelect.sendTime }}</span>
      </div>
      <div class="clo_class">
        <span>重试次数 : </span>
        <span class="generalClass">{{ emailSendRecCurrentSelect.resendCount }}</span>
      </div>
      <div class="clo_class">
        <span>发送结果 : </span>
        <span v-for="(value,key) in sendRslt" :value="key" :key="key" class="generalClass"
              v-if="emailSendRecCurrentSelect.sendRslt===key">{{ value }}</span>
      </div>
      <div class="clo_class">
        <span>发送内容 :</span>
        <div class="contClass" v-html="emailSendRecCurrentSelect.cont"></div>
      </div>
      <div class="clo_class" v-if="emailSendRecCurrentSelect.sendRslt==='02'">
        <span>失败原因 : </span>
        <span class="generalClass">{{ emailSendRecCurrentSelect.sendFailReason }}</span>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import {emailSearchModel, emailFormModel} from '../../../model/email'
import {getUserList, sendEmail, queryEmailSendRecList, resendEmail} from '@/api'
import teacher from '@/api/edu/teacher'
import {quillEditor} from "vue-quill-editor"; //调用编辑器
import {emailValidator} from '@/utils'

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      userList: [],
      emailSendRecCurrentSelect: '',
      emailSendRules: {
        subject: [
          {required: true, message: '必填', trigger: 'blur'}
        ],
        to: [
          {required: true, message: '必选', trigger: 'blur'},
          {required: true, validator: emailValidator, trigger: 'blur'}
        ],
      },
      dialogInfoShow: false,
      fullscreenLoading: false,
      loading: false,
      content: ``,
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'],     //引用，代码块
            [{'header': 1}, {'header': 2}],        // 标题，键值对的形式；1、2表示字体大小
            [{'list': 'ordered'}, {'list': 'bullet'}],     //列表
            [{'script': 'sub'}, {'script': 'super'}],   // 上下标
            [{'indent': '-1'}, {'indent': '+1'}],     // 缩进
            [{'direction': 'rtl'}],             // 文本方向
            [{'size': ['small', false, 'large', 'huge']}], // 字体大小
            [{'header': [1, 2, 3, 4, 5, 6, false]}],     //几级标题
            [{'color': []}, {'background': []}],     // 字体颜色，字体背景颜色
            [{'font': []}],     //字体
            [{'align': []}],    //对齐方式
            ['clean'],    //清除字体样式
            // ['image', 'video']    //上传图片、上传视频
          ]
        },
        theme: "snow",
        placeholder: "请输入正文"
      },
      teacherList: [],
      sendRslt: {
        '01': '成功',
        '02': '失败',
        '03': '发送中',
      },
      emailData: '',
      dialogFormShow: false,
      emailSearchForm: new emailSearchModel(),
      emailForm: new emailFormModel()
    }
  },
  methods: {
    sendMsg() {
      if (this.emailForm.cont == '') {
        return this.$message({
          message: '请输入发送内容',
          type: 'warning'
        })
      }
      this.$refs.emailForm.validate((bool) => {
        if (bool) {
          this.emailForm.receiver = this.emailForm.to.toString()
          this.sendEmail()
        }
      })
    },
    resendEmail(eduEmailId) {
      this.$confirm('该消息将重新发送, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.fullscreenLoading = true
        resendEmail(eduEmailId).then(e => {
          if (e.code == '20000') {
            this.$message({
              message: e.message,
              type: 'success'
            })
            this.getEmailData()
          } else {
            this.$message({
              message: e.message,
              type: 'error'
            })
          }

        }).finally(e => {
          this.dialogFormShow = false
          this.fullscreenLoading = false
        })
      })
    },
    sendEmail() {
      this.fullscreenLoading = true
      sendEmail(this.emailForm).then(e => {
        if (e.code == '20000') {
          this.$message({
            message: e.message,
            type: 'success'
          })
          this.getEmailData()
        } else {
          this.$message({
            message: e.message,
            type: 'error'
          })
        }

      }).finally(e => {
        this.dialogFormShow = false
        this.fullscreenLoading = false
      })
    },
    onEditorReady(editor) { // 准备编辑器

    },
    onEditorBlur() {
    }, // 失去焦点事件
    onEditorFocus() {
    }, // 获得焦点事件
    onEditorChange() {
    }, // 内容改变事件
    getEmailData(currentPage) {
      this.emailSearchForm.currentPage = currentPage
      this.loading = true
      queryEmailSendRecList(this.emailSearchForm).then(e => {
        this.emailData = e.data.data
      }).finally(e => {
        this.loading = false
      })
    },
    getAllTeacher() {
      teacher.getListTeacher().then(e => {
        this.teacherList = e.data.items
      })
    },
    getUserList() {
      getUserList().then(e => {
        this.userList = e.data.data
      })
    },
    showInfo(row) {
      this.emailSendRecCurrentSelect = row
      this.dialogInfoShow = true
    },
    resetData() {
      this.emailSearchForm = new emailSearchModel()
      this.getEmailData()
    },
    openDialog() {
      this.dialogFormShow = true
      this.emailForm = new emailFormModel()
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  mounted() {
    this.getEmailData()
    this.getAllTeacher()
    this.getUserList()
  }
}
</script>
<style>
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*height: 700px;*/
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}

.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}

.generalClass {
  color: rgba(0, 0, 0, 0.45);
}

.contClass {
  border: 1px solid;
  border-color: #b7cdda;
  color: rgba(0, 0, 0, 0.45);
  height: 200px;
  margin-right: 5%;
  overflow: auto;
  margin-top: 10px;
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;
}

.clo_class {
  margin-bottom: 16px;
}
</style>


